<template>
   <div class="play" ref="palywarrp" >
     <div v-if="currentUrl.songinfo">
       <div class="header">
         <div class="title">
           <router-link class="iconfont icon-shouye" to="/" tag="i"></router-link>
         </div>
         <div class="music-info">
           <p class="name">{{currentUrl.songinfo.title}}</p>
           <p class="author">{{currentUrl.songinfo.author}}</p>
         </div>
         <router-link tag="i" class="iconfont icon-xiazai15" to="/search"></router-link>
       </div>
       <div class="song-info">
         <div class="song-info-img">
           <img :src="currentUrl.songinfo.pic_big" alt="" >
           <Lrc :songId="songId" :currentTime="currentTime" :durationTime="durationTime"></Lrc>
         </div>
         <div class="icon-box">
           <i class="iconfont icon-02"></i>
           <i class="box"></i>
          <a  class="iconfont icon-46" :href="dowmlink"></a>
         </div>
       </div>
     </div>
     <div class="song" ref="song">
         <audio  ref="player" :src="show_link" controls autoplay></audio>
     </div>
   </div>
</template>

<script>
  import Lrc from '../components/lrc'
 // import  Vue from 'vue';
  // const Lrc = Vue.component('lrc',(resolve)=>require(['../components/lrc'],resolve)); // 异步引入
    export default {
      name: "musicPlay",
      data(){
        return{
          currentUrl:{},
          show_link:'',
          songId:this.$route.params.songId,
          currentTime:0, // 当前时间
          durationTime:0, // 总的时间
          dowmlink:`${this.host}/v1/restserver/ting?method=baidu.ting.song.downWeb&songid=${this.$route.params.songId}&bit=24&_t=1393123213`
        }
      },
      methods:{
        //  获取数据
        getSongData(){
          let url = this.host + `/v1/restserver/ting?method=baidu.ting.song.play&songid=${this.songId}`
          this.$axios.get(url).then(res=>{
             this.currentUrl = res.data;
             this.show_link = res.data.bitrate.show_link;
             if(this.show_link){
                this.addEventListeners()
             }

          }).catch(err=>{

          })
        },

        addEventListeners(){

          this.$refs.player.addEventListener('timeupdate',this._currentTime); // 监听事件获取 当前时间和总时间的长度
          this.$refs.player.addEventListener('canplay',this._derationTime)  //
        },

        removeEventLister(){
          this.$refs.player.removeEventListener('timeupdata',this._currentTime);
          this.$refs.player.removeEventListener('canplay',this._derationTime)
        },

       _currentTime(){
         this.currentTime = this.$refs.player.currentTime;  // 获取当前时间


       },
        _derationTime(){
          this.durationTime = this.$refs.player.duration   // 获取总的时间
        }
     },
      beforeDestroyed(){
          this.removeEventLister()
      },
      components:{
        Lrc
      },
      mounted(){
        this.getSongData();
      }
    }
</script>

<style scoped lang="less">
.play{
  margin-top: -44px;
  .header{
    display: flex;
    padding: 10px 0;
    align-items: center;
    .title,.icon-xiazai15{
      width: 80px;
      height: 100%;
      flex: 0 0 80px;
      display: flex;
      align-items: center;
     justify-content: center;
      i{
        font-size: 14px;
        color: #666;
      }
    }
    .music-info{
      flex: 1;
      text-align: center;
      .name{
        font-size: 16px;
      }
      .author{
        font-size: 13px;
        color: #999;
        margin-top: 8px;
      }
    }
  }
  .song-info{
    position: absolute;
    top: 57px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    bottom: 54px;
  .song-info-img{
    width: 100%;
    padding:20px 0;
    text-align: center;
    img{
      width: 150px;
      border-radius: 100px;

    }

  }

  .icon-box{
    display: flex;
    padding: 10px 0;
    height: 40px;
    align-items: center;
    .box{
      flex: 1;
    }
    .icon-02,.icon-46{
      width: 80px;
      height: 100%;
      font-weight: 700;
      flex: 0 0 80px;
      display: flex;
      color: #666;
      font-size: 18px;
      align-items: center;
      justify-content: center;
      a{
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
  }
  .song{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
  }
}

</style>
